import { useEffect, useState, useCallback, useMemo, useRef } from "react";
import i18n from "i18n-js";
import { toJS } from "mobx";
import Taro from "@tarojs/taro";
import productI18n from '@/language/productI18n';
import PageContainer from "@/components/PageContainer";
import { DynamicColors, GStyleSheet, GDynamicValue } from "@/utils/DarkMode";
import { View, Text } from "@tarojs/components";
import { GButton } from "@/components/GButton";
import { networkConfigTypes } from '@/config/product';
import configWifiModel from '../models/configWifi';
import Steps from '@/components/steps';
import FlexScrollView from '@/components/FlexScrollView';


const dstyles = GStyleSheet.create({
  page: {
    backgroundColor: DynamicColors.normalBackgroundColor,
  },
  container: {
    width: "100%",
    height: "100%",
    padding: "32rpx",
    boxSizing: "border-box",
    borderTop: "1rpx solid rgba(0,0,0,0.1)",
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between'
  },
  desc: {
    width: "100%",
    padding: "20rpx 40rpx",
    boxSizing: "border-box",
    backgroundColor: "#fafafa",
    borderRadius: 10,
    flex: 1,
    flexDirection: 'column',
  },
});


const ResetTipPage = () => {

  const styles = dstyles.useDynamicStyle();

  const getTips = useMemo(() => {
    const { resetDevice } = configWifiModel.productConfig;
    const tips = [];
    if (
      !resetDevice
      || !resetDevice.content
      || resetDevice.content.length === 0
    ) {
      // default
      tips.push(
        ...[
          { tips: i18n.t('RESET_TIP_1') },
          { tips: i18n.t('RESET_TIP_2') },
          { tips: i18n.t('RESET_TIP_3') },
        ]
      );
    } else {
      (resetDevice.content || []).forEach((item) => {
        tips.push({
          tips: productI18n(item.text, configWifiModel.productConfig!, null),
          image: item.image,
        });
      });
    }
    return tips;
  }, []);

  return (
    <PageContainer title={i18n.t('ADD_DEVICE')} style={styles.page}>
      <View style={styles.container}>
        <View style={styles.desc} className='centerFlex'>
          <FlexScrollView id='resetTipList'>
            <Steps data={getTips} />
          </FlexScrollView>
        </View>
        <GButton text={i18n.t('START')} onPress={() => { configWifiModel.goToCurrentModel() }} />
      </View>
    </PageContainer>
  );
};

export default ResetTipPage;
